<template>
  <div class="box">
    <div class="shang"></div>
    <div class="zhong">
      <el-button type="primary" size="small" @click="npmNum()">新增</el-button>
      <!-- 新增弹窗 -->
      <el-dialog v-model="centerDialogVisible" :title="title" width="500" center>
        <span>
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="ruleForm.userName" />
            </el-form-item>

            <el-form-item label="部门" prop="section">
              <el-input v-model="ruleForm.section" />
            </el-form-item>

            <el-form-item label="角色" prop="role">
              <el-input v-model="ruleForm.role" />
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-input v-model="ruleForm.status" />
            </el-form-item>

          </el-form>
        </span>
        <template #footer>
          <div class="dialog-footer">
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                确定
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
          </div>
        </template>
      </el-dialog>

      <!-- ==================================== -->
      <el-table :data="tableData" style="width: 100% ">
        
        <el-table-column prop="userName" label="名字" width="150" />
        <el-table-column prop="status" label="问题" width="120" />
        <el-table-column prop="section" label="解决" width="120" />
        <el-table-column prop="role" label="QQ" width="520" />
        <el-table-column label="图片">
          <template #default="scope">
            <img :src="scope.row.photo" alt="" srcset="">
          </template>
        </el-table-column>
        <el-table-column prop="zip" />
        <el-table-column label="功能" min-width="320">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleClick">
              编辑
            </el-button>
            <el-button type="primary" @click="abeNum(scope.row)">编辑</el-button>
            <el-button type="primary" @click="recNum(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="xia"></div>
  </div>
</template>

<script setup>

import { reactive, ref } from 'vue'
import { getUserListiApi, addUserApi, delUserApi,editItemApi} from "@/api/api"

// 获取列表
// ===============================
const tableData = ref([])

const buttm = () => {
  getUserListiApi().then((res) => {
    console.log(res);
    tableData.value = res.data.data

  })
}
buttm()
// =================================

// 删除
// ======================
import { ElMessage, ElMessageBox } from 'element-plus'
const recNum = (id) => {

  ElMessageBox.confirm(
    '确定删除吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',

    }
  )
    .then(() => {
      delUserApi(id).then((res) => {

        if (res.data.code == 1) {
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          buttm()
        }

      })
    })
    .catch(() => {
      ElMessage({
        message: '删除失败',
        type: 'success',
      })
    })
}
//  ========================


// 新增
// ==================

const centerDialogVisible = ref(false)
const title = ref([])
const npmNum = () => {
  centerDialogVisible.value = true
  title.value = "新增"
}


const abeNum = (niuniu) => {

  centerDialogVisible.value = true
  title.value = "编辑"
  ruleForm.value = niuniu
}

// ====================

const ruleFormRef = ref()
const ruleForm = ref({
  userName: '',
  section: '',
  role: '',
  status: '',
  photo
    :
    "https://img2.baidu.com/it/u=2427333929,299356392&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1718211600&t=45c33ce27772cc5a91db3fc53ab462b5"

})
const rules = reactive({
  userName: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },

  ],
  section: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },

  ],
  role: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },

  ],
  status: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },

  ],
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      if (title.value == "新增") {
        addUserApi(ruleForm.value).then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            ElMessage({
              message: '新增成功',
              
            })
            centerDialogVisible.value = false
            tableData.value=res.data.data
            buttm()
          }
        })
      }else{
            editItemApi(ruleForm.value).then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            ElMessage({
              message: '编辑成功',
              
            })
           centerDialogVisible.value = false
            tableData.value=res.data.data
            buttm()
          }
        })
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;

  .zhong {


    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

}
</style>